// src/components/AttractionMap.jsx
import React from 'react';
import { Button } from 'antd';

const AttractionMap = () => {
  return (
    <div style={{ width: '100%', padding: '20px' }}>
      <h2>南涧旅游小攻略 - 景点介绍</h2>
      <div style={{ position: 'relative', height: '400px', border: '1px solid #ccc' }}>
        {/* 使用 SVG 或图片模拟地图 */}
        <img 
          src="https://ts4.tc.mm.bing.net/th/id/OIP-C.zsWyK37cYmXtCiQcUgPZSgHaHk?r=0&rs=1&pid=ImgDetMain&o=7&rm=3" 
          alt="南涧地图" 
          style={{ width: '100%', height: '100%' }} 
        />
        {/* 景点标记示例 */}
        <div 
          style={{ 
            position: 'absolute', 
            top: '30%', 
            left: '40%', 
            transform: 'translate(-50%, -50%)',
            cursor: 'pointer',
            transition: 'transform 0.3s',
            zIndex: 1,
          }}
          onMouseOver={(e) => {
            e.currentTarget.style.transform = 'scale(1.2) translate(-50%, -50%)';
          }}
          onMouseOut={(e) => {
            e.currentTarget.style.transform = 'translate(-50%, -50%)';
          }}
        >
          <div style={{ width: '100px', height: '100px', backgroundColor: '#f0f0f0', borderRadius: 8, textAlign: 'center' }}>
            <p>南涧古镇</p>
            <Button type="link">
              <a href="/attraction/1">了解详情</a>
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default AttractionMap;